import QtQuick 2.0
import QtQuick.Controls 2.3
import QtQuick.Controls 1.4 as Ctrl1
import QtQuick.Layouts 1.3
import QtQuick.Controls.Styles 1.4
import QtQml.Models 2.2
import ClockStatTreeModel 1.0
import '../../widget'
import '../../labels'


StackPage {
    id:window
    tabIndex: 1
    Component.onCompleted: {
        var user_id = settings.value("user/pid","0")
        clockStatTreeModel.slot_stat_req(user_id)
    }

    ColumnLayout{
        anchors.fill: parent
        spacing:0

        Rectangle {
            Layout.fillWidth: true
            Layout.preferredHeight: 40

            ReturnImg{
                onClicked: {
                    window.pop();
                }
            }

            TitleLabel {
                text: qsTr("统计")
                anchors.fill: parent
            }

        }

        Rectangle{
            Layout.fillWidth: true
            Layout.preferredHeight: 40

            ContentLabel{
                text:settings.value("user/department","")+" "+settings.value("user/name","")
                anchors{
                    verticalCenter: parent.verticalCenter
                    left:parent.left
                    leftMargin: 15
                }
            }

            TitleLabel{
                text:"2018.03"
                anchors{
                    verticalCenter: parent.verticalCenter
                    right:listDownImg.left
                    rightMargin: 10
                }
            }

            Image{
                id:listDownImg
                source:"qrc:/img/list_down.png"
                sourceSize:Qt.size(20,20)
                anchors{
                    verticalCenter: parent.verticalCenter
                    right:parent.right
                    rightMargin: 15
                }
            }
        }

        Rectangle{
            Layout.fillWidth: true
            Layout.preferredHeight: 50

            Image{
                id:slotImg
                source:"qrc:/img/work_slot.png"
                sourceSize:Qt.size(20,20)
                anchors{
                    verticalCenter: parent.verticalCenter
                    left:parent.left
                    leftMargin: 15
                }
            }

            ContentLabel{
                text:"考勤足迹"
                color:"#989898"
                anchors{
                    verticalCenter: parent.verticalCenter
                    left:slotImg.right
                    leftMargin: 10
                }

                MouseArea{
                    anchors.fill: parent
                    onClicked: {
                        window.toUrl("qrc:/work/clock/StatSlot.qml")
                    }
                }
            }

            Image{
                id:calendarImg
                source:"qrc:/img/work-calendar.png"
                sourceSize:Qt.size(20,20)
                anchors{
                    verticalCenter: parent.verticalCenter
                    right:calendarText.left
                    rightMargin: 10
                }
            }

            ContentLabel{
                id:calendarText
                text:"考勤月历"
                color:"#989898"
                anchors{
                    verticalCenter: parent.verticalCenter
                    right:parent.right
                    rightMargin: 15
                }

                MouseArea{
                    anchors.fill: parent

                    onClicked: {
                        window.toUrl("qrc:/work/clock/StatCalendar.qml")
                    }
                }
            }
        }

        Ctrl1.TreeView {
            id:treeView

//            ScrollBar.vertical: ScrollBar {
//                parent: treeView
//                x: treeView.mirrored ? 0 : treeView.width - width
//                y: treeView.topPadding
//                height: treeView.availableHeight
//                active: treeView.ScrollBar.horizontal.active
//            }

//            ScrollBar.horizontal: ScrollBar {
//                parent: treeView
//                x: treeView.leftPadding
//                y: treeView.height - height
//                width: treeView.availableWidth
//                active: treeView.ScrollBar.vertical.active
//            }

            model:ClockStatTreeModel{
                id:clockStatTreeModel
            }

            headerVisible: false
            alternatingRowColors : false
            backgroundVisible: false
            Layout.fillWidth: true
            Layout.fillHeight: true

            style:TreeViewStyle{
                branchDelegate:Rectangle{
                    id:listBranch
                    visible: styleData.hasChildren
                    x:treeView.width-50
                    width:10
                    height:10
                    BorderImage{
                        source:"qrc:/img/list_down.png"
                        anchors.fill: parent
                    }
                    state:styleData.isExpanded?"open":"close"
                    states:[
                        State{
                            name:"open"
                        },
                        State{
                            name:"close"
                        }
                    ]
                    transitions: [
                        Transition {
                            from: "open";to: "close"
                            RotationAnimation{
                                target: listBranch
                                from: 180
                                to:0
                                duration: 500
                            }
                        },
                        Transition {
                            from: "close";to: "open"
                            RotationAnimation{
                                target: listBranch
                                from: 0
                                to:180
                                duration: 500
                            }
                        }
                    ]
                }
                backgroundColor :"#ffffff"



                rowDelegate:Rectangle{
                    height: 50
                    color:treeView.hasParent(styleData.row)?"#fcfcfc":"#ffffff"
                }
                itemDelegate:Loader{
                    property Component firstLabel:Component{
                        Rectangle{
                            TitleLabel{
                                anchors{
                                    verticalCenter: parent.verticalCenter
                                    left:parent.left
                                    leftMargin: 0
                                }
                                text:clockStatTreeModel.data(styleData.index,ClockStatTreeModel.TitleRole)
                            }
                            TitleLabel{
                                anchors{
                                    verticalCenter: parent.verticalCenter
                                    right: parent.right
                                    rightMargin: 0
                                }
                                color:'#999999'
                                text:treeView.model.data(styleData.index,ClockStatTreeModel.DayRole)+"天"
                            }
                        }
                    }
                    property Component secondLabel:Component{
                        Rectangle{
                            TitleLabel{
                                id:dateText
                                color: "#737983"
                                anchors{
                                    verticalCenter: parent.verticalCenter
                                    left:parent.left
                                    leftMargin: 0
                                }
                                text:treeView.model.data(styleData.index,ClockStatTreeModel.DateRole)
                            }
                            TitleLabel{
                                color: "#737983"
                                anchors{
                                    verticalCenter: parent.verticalCenter
                                    left:dateText.right
                                    leftMargin:20
                                }
                                text:treeView.model.data(styleData.index,ClockStatTreeModel.WeekRole)
                            }
                        }

                    }

                    sourceComponent: styleData.depth===0?firstLabel:secondLabel
                }
            }

            Ctrl1.TableViewColumn {
                title: "Title"
                role: "title"
                width:treeView.width-50
            }

            function hasParent(row){
                return treeView.model.hasParent(treeView.__model.mapRowToModelIndex(row))
            }

        }

    }

}
